Example: Using Barikoi GL in React or Next.js

Introduction

This guide demonstrates how to integrate the bkoi-gl package into a React or Next.js component to display a map. It will show how to initialize a map with basic settings such as the center location, zoom level, and more. The example provided is simple yet powerful, allowing you to quickly embed interactive maps into your projects.

Example

"use client";
import { useEffect, useRef } from "react";
import { Map } from "bkoi-gl"; // Import the Barikoi GL package
import "bkoi-gl/dist/style/bkoi-gl.css"; // Import CSS for proper map styling

const MainMap = () => {
  // Refs for the map container and map instance
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return; // Ensures map initializes only once
    map.current = new Map({
      container: mapContainer.current,
      center: [90.39017821904588, 23.719800220780733], // Coordinates for Dhaka, Bangladesh
      zoom: 10,
      doubleClickZoom: false,
      accessToken: "YOUR_BARIKOI_API_KEY_HERE", // Replace with your Barikoi API key
    });
  }, []);

  return <div ref={mapContainer} style={containerStyles} />;
};

// Styles for the map container
const containerStyles = {
  width: "100%",
  height: "100vh",
  minHeight: "400px",
  overflow: "hidden",
};

export default MainMap;